/* 获取元素 */
const loveMe = document.querySelector(".loveMe");
const times = document.querySelector("#times");
/* 初始值 */
let clickTime = 0;
let timesClicked = 0;
/* 点击事件 */
loveMe.addEventListener("click", (e) => {
  if (clickTime === 0) {
    clickTime = new Date().getTime();
  } else {
    if (new Date().getTime() - clickTime < 800) {
      createHeart(e);
      clickTime = 0;
    } else {
      clickTime = new Date().getTime();
    }
  }
});
// loveMe.addEventListener("dblclick", (e) => {
//   // console.log("双击事件");
//   createHeart(e);
// });
const createHeart = (e) => {
  console.log("进来了");
  /* 创建一个i标签 */
  const heart = document.createElement("i");
  /* 添加上类样式 */
  heart.classList.add("fas");
  heart.classList.add("fa-heart");
  /* 获取点击的元素在x轴y轴上的位置 */
  const x = e.clientX;
  const y = e.clientY;
  /* 获取距离左和上的距离 */
  const leftOffset = e.target.offsetLeft;
  const topOffset = e.target.offsetTop;
  /* 得到当前元素的中心坐标 */
  const xInside = x - leftOffset;
  const yInside = y - topOffset;
  /* 设置坐标 */
  heart.style.top = `${yInside}px`;
  heart.style.left = `${xInside}px`;
  /* 在loveMe元素上添加创建的i标签 */
  loveMe.appendChild(heart);

  times.innerHTML = ++timesClicked;
  /* 一秒钟后删除创建的i标签 */
  setTimeout(() => heart.remove(), 1000);
};
